<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!--
	HTTP协议: 超文本传输协议HyperText Transfer Protocol
		通过这个协议传输html或图片或js等网页数据
	(客服端的)浏览器端 ------ 服务器端
		浏览器端: 客户在进行各式各样的操作,点击/查看/浏览等
		服务器端: 存储了大量的数据, 供客服端访问使用
		HTTP协议, 可以理解是两者之间的桥梁, 
			(浏览器端通过各种请求,发往服务器端,然后桥梁建成)
		在浏览器端,通过get/post请求方法,向服务器端发送某个请求
		服务器端通过相同的请求方法,接受并处理请求,
			将处理过后的数据返回给浏览器端
		浏览器端接受处理过后的数据,将数据渲染在页面上
		
	-->

    <script>
        // ajax:Asynchrous JavaScript And XML 即异步的js和xml。
        // xml:eXtensible Maruo Language 即可扩展性标记语言
        // html:HyperText Markup Language 即超文本标记语言。
        // xml的标签支持自定义，而HTML标签全是预定义。

        // ajax可以在不刷新页面的情况下发送请求

        // 1.创建一个XMLHttpRequest 对象，通过这个对象发送http请求
        var xhr = new XMLHttpRequest();
        console.log(xhr);
        // 2.设置请求方法，和请求地址 (参数1是请求方法，参数2是请求地址url)
        xhr.open('GET', 'https://cnodejs.org/api/v1/topics?page=2');
        // 3.发送请求
        xhr.send();

        // 4.监听请求
        xhr.onreadystatechange = function () {
            console.log(xhr.readyState);
            if (xhr.readyState === 4) {
                // console.log(xhr.readyState);
                var data = JSON.parse(xhr.responseText);
                console.log(data);
            }
        }
    </script>
</body>

</html>